<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>BFC</title>

        <style type="text/css">
            .odd { background: #dedede ; }
            .even { background: rgb(255, 190, 69) ;}

            .wrapper { border: 5px solid blue ; }

            .first>span { 
                /* 元素的 display 为 inline-block 时会产生BFC */
                display: inline-block ;
                height: 300px ; 
                width: 300px ;
                vertical-align: top ;
            }

            .first>img { vertical-align: top ; }

            .second>div { 
                display: inline-block ;
                width: 300px ;
                vertical-align: top ;
            }

            .second>img { vertical-align: top ; }

        </style>
    </head>
    <body>

        <div class="wrapper first">
            <span class="odd"></span>
            <span class="even"></span>
            <span class="odd"></span>
            <span class="even"></span>
            <img src="liuyifei.jpg" alt="刘亦菲">
        </div>

        <div class="wrapper second">
            <div>
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
                <p class="even">问渠那得清如许</p>
                <p class="odd">为有源头活水来</p>
                <p class="even">春眠不觉晓</p>
                <p class="odd">处处闻啼鸟</p>
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
            </div>
            <div>
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
                <p class="even">问渠那得清如许</p>
                <p class="odd">为有源头活水来</p>
            </div>
            <div>
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
                <p class="even">问渠那得清如许</p>
                <p class="odd">为有源头活水来</p>
            </div>
            <div>
                <p class="even">落霞与孤鹜齐飞</p>
                <p class="odd">秋水共长天一色</p>
            </div>
            <img src="liuyifei.jpg" alt="刘亦菲">
        </div>
        
    </body>
</html>